<template>
  <div class="search" >
    <div class="mysearch">
      <form action="/">
        <van-search
          background="#3296fa"
          show-action
          v-model="value"
          @keyup="getInput"
          @keydown.enter="getResult"
          shape="round"
          color="#fff"
        >
        </van-search>
      </form>
    </div>
    <div class="remind" v-if="value">
      <van-cell title="联想区域" center>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      </van-cell>
      <van-cell-group>
        <van-cell
          center
          v-for="(item, index) in items"
          :key="index"
          @click="remindClick(item)"
        >
          <template #title>
            <div v-html="item"></div>
          </template>
          <template #icon>
            <van-icon name="search" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="history" v-else>
      <van-cell title="历史区域" center>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="delete-o" size="16px" @click="delClick"> </van-icon>
        </template>
      </van-cell>
      <van-cell-group v-if="isShow">
        <van-cell
          center
          v-for="(item, index) in historyList"
          :key="index"
          @click="historyClick(item)"
        >
          <template #icon>
            <van-icon name="search" size="23 px" />
          </template>
          <template #title>
            {{ item }}
          </template>
          <template #right-icon>
            <!-- @click.stop 阻止事件冒泡 触发historyClick点击事件跳转页面 -->
            <van-icon
              name="cross"
              size="16px"
              @click.stop="crossClick(index)"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { getRemindApi } from '../../../api/searchApi'
import { localSet, localGet, localDel } from '../../../utils/mylocal'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      value: '',
      items: [],
      isShow: true,
      newStr: '',
      historyList: localGet('history') || [],
      // 保存替换高亮文本之前的内容 渲染到历史区域
      oldItem: ''
    }
  },
  methods: {
    onCancel () {

    },
    // 获得联想区域的数据
    async getInput () {
      if (this.value) {
        const res = await getRemindApi(this.value)
        this.items = res.data.options
        // console.log('this.items',this.items);
        // 输入内容在联想区域高亮显示
        this.items = this.items.map(item => {
          this.oldItem = item
          // console.log(this.oldItem)
          // console.log(this.value);
          const str = new RegExp(this.value, 'i')
          if (!this.oldItem.match(str)) {
            return
          }
          const res = this.oldItem.match(str)[0]
          console.log('res', res)
          console.log('item', item)
          return item.replace(
            res,
            `<span style="color: #ff0000">${res}</span>`
          )
        })
      }
    },
    // 点击回车获得搜索结果
    getResult () {
      if (this.value.trim() === '') {
        return
      } else {
        // 将数据添加至数组最前面
        this.historyList.unshift(this.value)
        // 数组去重
        this.historyList = [...new Set(this.historyList)]
      }
      localSet('history', this.historyList)
      // console.log(this.historyList)
      this.$router.push(`/searchResult/${this.value}`)
    },
    // 点击联想区域
    remindClick (item) {
      // 将数据添加至数组最前面
      this.historyList.unshift(this.oldItem)
      // 数组去重
      this.historyList = [...new Set(this.historyList)]
      // console.log(this.historyList);
      localSet('history', this.historyList)
      this.$router.push(`/searchResult/${this.oldItem}`)
    },
    // 点击历史区域
    historyClick (item) {
      // 将数据添加至数组最前面
      this.historyList.unshift(item)
      // 数组去重
      this.historyList = [...new Set(this.historyList)]
      localSet('history', this.historyList)
      this.$router.push(`/searchResult/${item}`)
    },
    // 删除所有历史区域
    delClick () {
      Dialog.confirm({
        title: '提示',
        message: '是否删除所有历史数据'
      })
        .then(() => {
          // 点击确定  删除保存本地的历史区域数组数据
          if (this.historyList) {
            // this.isShow =false
            localDel('history')
            this.historyList = []
          }
        })
        .catch(() => {
          // on cancel
        })
    },
    // 删除所在那行历史区域
    crossClick (index) {
      // console.log(index)
      // 删除数组所在下标元素
      this.historyList.splice(index, 1)
      localSet('history', this.historyList)
      // 如果删除了数组最后一个元素  删除保存在本地的history键
      if (this.historyList.length === 0) {
        localDel('history')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  padding-bottom: 60px;
  .van-icon {
    margin-right: 10px;
  }
  .mysearch {
    .van-search__action {
      color: #fff;
      // background-color:rgb(50, 150, 250);
      background-color: transparent;
    }
  }
}
</style>
